---
section: Transforms
title: Transform Origin
slug: /docs/transform-origin/
order: 2
---

# Transform Origin

Utilities for specifying the origin for an element's transformations.

<carbon-ad />

| React props               | CSS Properties               |
| ------------------------- | ---------------------------- |
| `transformOrigin={value}` | `transform-origin: {value};` |

## Usage

Specify an element's transform origin using the `transformOrigin={value}` utility.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      justifyContent="space-around"
      spaceY={{ xs: 0, md: 12 }}
      spaceY={{ xs: 12, md: 0 }}
      my={10}
    >
      {['center', 'top left', 'bottom right', 'left'].map((keyword) => (
        <x.div
          key={keyword}
          w={20}
          h={20}
          bg="light-blue-300"
          borderRadius="md"
        >
          <x.img
            h={20}
            w={20}
            transform
            transformOrigin={keyword}
            rotate={45}
            borderRadius="md"
            src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.img transform transformOrigin="center" rotate={45} />
  <x.img transform transformOrigin="top left" rotate={45} />
  <x.img transform transformOrigin="bottom right" rotate={45} />
  <x.img transform transformOrigin="left" rotate={45} />
</>
```

## Responsive

To control the transform-origin of an element at a specific breakpoint, use responsive object notation. For example, adding the property `transformOrigin={{ md: "top" }}` to an element would apply the `transformOrigin="top"` utility at medium screen sizes and above.

```jsx
<x.div transform rotate={45} transformOrigin={{ md: 'top' }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
